<template>
  <section class="mt-36">
    <div class="text-2def text-center text-[#626262]"> Cases of CNC Machining</div>
    <div>
      <swiper-container
        :slides-per-view="5"
        :slides-per-group="5"
        :grid="{
          rows: 2,
          fill: 'row'
        }"
        :loop="true"
        :autoplay="{
          delay: 7000,
        }"
        :pagination="pagination"
        class="w-339.5"
      >
        <swiper-slide v-for="(image, index) in imagePaths" :key="index">
          <figure class="w-62.5">
            <img :src="image.path" :alt="image.name" />
          </figure>
        </swiper-slide>
      </swiper-container>
    </div>
    <div class="mt-36 mb-20 flex justify-center items-center">
      <div style="width: 135px">
        <figure>
          <img src="/src/images/services/machining/phone.webp" alt="" />
        </figure>
      </div>
      <div class="pl-8" style="width: 924px">
        <p style="line-height: 27px">
          At Maxprecise Global, a CNC machining company in china, we offer an extensive array of precision
          custom CNC machining services, including CNC milling, CNC turning, EDM, wire cutting, and
          surface grinding. With cutting-edge CNC centers (equipped with 3-axis, 4-axis, and 5-axis
          capabilities) and a skilled team, we handle any custom design, no matter its complexity.
          <span class="text-red-650">Count on us</span> for your CNC parts manufacturing needs
          today!
        </p>
      </div>
    </div>
    <div class="flex justify-center items-center">
      <div class="w-129">
        <div class="text-2def text-center text-[#626262]">What is CNC Machining？</div>
        <div style="line-height: 27px">
          CNC Machining, short for Computer Numerical Control machining, is a precise manufacturing
          process that utilizes computer-controlled machines to remove material from a workpiece,
          producing custom-designed parts. Widely employed in industries like automotive, aerospace,
          electronics, and prototyping for its efficiency and accuracy.
        </div>
      </div>
      <div class="w-129">
        <figure
          class="h-63 bg-cover bg-center"
          :style="{ backgroundImage: `url(${CNC})` }"
        />
      </div>
    </div>

  </section>
</template>

<script setup>
import { ref } from 'vue'
import CNC from '/src/images/services/machining/CNC.webp'

const images = import.meta.glob('/src/images/services/machining/Machining-*.webp', { eager: true });

const imagePaths = Object.entries(images).map(([key, value]) => ({
  path: value.default || value, // 对应导入的图片路径
  name: key.split('/').pop(),  // 提取文件名
}));


const pagination = ref({
  clickable: true,
  renderBullet: function (index, className) {
    return `<span class="${className}"></span>`
  }
})

</script>

<style scoped>
swiper-container {
  --swiper-pagination-bottom: 0;
  --swiper-pagination-bullet-width: 6px;
  --swiper-pagination-bullet-height: 6px;
  --swiper-pagination-bullet-horizontal-gap: 6px;
  --swiper-pagination-color: #000000;
}
</style>
